{% if enableWebcam %}
    <!-- ko if: loginState.hasPermissionKo(access.permissions.WEBCAM) -->
    <div id="webcam_hls_container" tabindex="0" data-bind="visible: webcamHlsEnabled()">
        <video id="webcam_hls" muted autoplay style="width: 100%"/>
    </div>
    <div id="webcam_container" tabindex="0" data-bind="event: { keydown: onKeyDown, mouseover: onMouseOver, mouseout: onMouseOut, focus: onFocus }, visible: webcamMjpgEnabled()">
        <div class="nowebcam" data-bind="visible: !webcamLoaded()">
            <div class="text webcam_loading" data-bind="visible: !webcamLoaded() && !webcamError()">
                <p><strong>{{ _('Webcam stream loading...') }}</strong></p>
            </div>
            <div class="text webcam_error" data-bind="visible: !webcamLoaded() && webcamError()">
                <p><strong>{{ _('Webcam stream not loaded') }}</strong></p>
                <p data-bind="visible: !loginState.isAdmin()"><small>{{ _('It might not be configured correctly or require authentication. To have this fixed, get in touch with an administrator of this OctoPrint instance.') }}</small></p>
                <p data-bind="visible: loginState.isAdmin"><small>{{ _('It might not be configured correctly or require authentication. You can change the URL of the stream under "Settings" > "Webcam & Timelapse" > "Webcam" > "Stream URL". If you don\'t have a webcam you can also just disable webcam support there.') }}</small></p>
                <p data-bind="visible: loginState.isUser"><small>{{ _('Currently configured stream URL') }}: <a target="_blank" rel="noreferrer" data-bind="attr: {href: settings.webcam_streamUrl}, text: settings.webcam_streamUrl"></a></small></p>
            </div>
        </div>
        <div id="webcam_rotator" data-bind="css: { webcam_rotated: settings.webcam_rotate90(), webcam_unrotated: !settings.webcam_rotate90() }">
            <div class="webcam_fixed_ratio" data-bind="css: webcamRatioClass">
                <div class="webcam_fixed_ratio_inner">
                    <img id="webcam_image" data-bind="css: { flipH: settings.webcam_flipH(), flipV: settings.webcam_flipV() }, event: { load: onWebcamLoaded, error: onWebcamErrored }, visible: !webcamError()">
                </div>
            </div>
        </div>
        <div class="keycontrol_overlay" data-bind="visible: showKeycontrols">
            <div class="keycontrol_overlay_heading">{{ _("Keyboard controls active") }} <a href="#" data-bind="click: toggleKeycontrolHelp"><i class="fas" data-bind="css: { 'fa-chevron-down': !keycontrolHelpActive(), 'fa-chevron-up': keycontrolHelpActive() }"></i></a></div>
            <div data-bind="visible: keycontrolHelpActive">
                <div class="keycontrol_overlay_column">
                    <kbd>&rarr;</kbd> / <kbd>&larr;</kbd>: {{ _("X Axis") }} +/-<br>
                    <kbd>&uarr;</kbd> / <kbd>&darr;</kbd>: {{ _("Y Axis") }} +/-<br>
                    <kbd>W</kbd>, <kbd>{{ _("Page&uarr;") }}</kbd> / <kbd>S</kbd>, <kbd>{{ _("Page&darr;") }}</kbd>: {{ _("Z Axis") }} +/-
                </div>
                <div class="keycontrol_overlay_column">
                    <kbd>Home</kbd>: {{ _("Home X/Y") }}<br>
                    <kbd>End</kbd>: {{ _("Home Z") }}<br>
                    <kbd>1</kbd>, <kbd>2</kbd>, <kbd>3</kbd>, <kbd>4</kbd>: {{ _("Stepsize") }} 0.1, 1, 10, 100mm
                </div>
            </div>
        </div>
    </div>
    <div data-bind="visible: keycontrolPossible() && loginState.hasPermissionKo(access.permissions.WEBCAM)() && loginState.hasPermissionKo(access.permissions.CONTROL)()">
        <small class="muted">{{ _("Hint: If you move your mouse over the picture, you enter keyboard control mode.") }}</small>
    </div>
    <!-- /ko -->
{% endif %}

<div class="jog-panel" style="display: none;" data-bind="visible: loginState.hasPermissionKo(access.permissions.CONTROL)">
    <!-- XY jogging control panel -->
    <div id="control-jog-xy" class="jog-panel">
        <h1>X/Y</h1>
        <div>
            <button id="control-yinc" class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('y',1) }"><i class="fas fa-arrow-up"></i></button>
        </div>
        <div>
            <button id="control-xdec" class="btn box pull-left" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('x',-1) }"><i class="fas fa-arrow-left"></i></button>
            <button id="control-xyhome" class="btn box pull-left" data-bind="enable: isOperational() && !isPrinting() , click: function() { $root.sendHomeCommand(['x', 'y']) }"><i class="fas fa-home"></i></button>
            <button id="control-xinc" class="btn box pull-left" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('x',1) }"><i class="fas fa-arrow-right"></i></button>
        </div>
        <div>
            <button id="control-ydec" class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('y',-1) }"><i class="fas fa-arrow-down"></i></button>
        </div>
    </div>
    <!-- Z jogging control panel -->
    <div id="control-jog-z" class="jog-panel">
        <h1>Z</h1>
        <div>
            <button id="control-zinc" class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('z',1) }"><i class="fas fa-arrow-up"></i></button>
        </div>
        <div>
            <button id="control-zhome" class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendHomeCommand(['z']) }"><i class="fas fa-home"></i></button>
        </div>
        <div>
            <button id="control-zdec" class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('z',-1) }"><i class="fas fa-arrow-down"></i></button>
        </div>
    </div>

    <!-- Jog distance -->
    <div class="distance">
        <div class="btn-group" data-toggle="buttons-radio" id="jog_distance">
            <!-- ko foreach: distances -->
            <button type="button" class="btn distance" data-bind="enable: $root.isOperational() && !$root.isPrinting(), text: $data, click: function() { $root.distance($data) }, css: { active: $root.distance() === $data }, attr: { id: 'control-distance' + $root.stripDistanceDecimal($data) }"></button>
            <!-- /ko -->
        </div>
    </div>

    <!-- Feed rate -->
    <div id="control-jog-feedrate" class="jog-panel">
        <label>{{ _('Feed rate modifier:') }} <a class="text-info" href="javascript:void(0)" data-bind="popover: {placement: 'top', trigger: 'hover', title: '{{ _('Please note!') }}', content: '{{ _('The feed rate can only be set, it cannot be read back from the firmware due to a limitation of the communication protocol. There is no way to show the current setting.') }}'}"><i class="fas fa-info-circle"></i></a></label>
        <div class="input-append control-box">
            <input type="number" class="input-mini" min="1" step="1" data-bind="textInput: feedRate, event: { blur: resetFeedRateDisplay, focus: cancelFeedRateDisplayReset }, css: { pulsate_text_opacity: feedRateResetter() !== undefined }">
            <span class="add-on">%</span>
            <button class="btn" data-bind="enable: isOperational() && feedRate(), click: function() { $root.sendFeedRateCommand() }">Set</button>
        </div>
    </div>
</div>
<!-- Extrusion control panel -->
<div id="control-jog-extrusion" class="jog-panel" style="display: none;" data-bind="visible: loginState.hasPermissionKo(access.permissions.CONTROL)() && tools().length > 0">
    <h1>Tool (E)</h1>
    <div>
        <div class="input-append control-box">
            <input type="number" class="input-mini text-right" data-bind="value: extrusionAmount, enable: isOperational() && !isPrinting()">
            <span class="add-on">mm</span>
        </div>
        <button class="btn btn-block control-box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendExtrudeCommand() }">{{ _('Extrude') }}</button>
        <button class="btn btn-block control-box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendRetractCommand() }">{{ _('Retract') }}</button>
        <div data-bind="style: { visibility: tools().length > 1 ? 'visible' : 'hidden' }">
            <div class="btn-group control-box" style="display: inline-block">
                <button class="btn dropdown-toggle" data-toggle="dropdown" data-bind="enable: isOperational() && !isPrinting() && !isPaused()">
                    {{ _('Switch Tool...') }}
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" data-bind="foreach: tools">
                    <li><a href="#" data-bind="click: $root.sendSelectToolCommand, text: name(), enable: $root.isOperational() && !$root.isPrinting() && !$root.isPaused()"></a></li>
                </ul>
            </div>
            <a class="text-info" style="display: inline-block; height: 30px; vertical-align: middle" href="javascript:void(0)" data-bind="popover: {placement: 'top', trigger: 'hover', title: '{{ _('Please note!') }}', content: '{{ _('The selected tool can only be set, it cannot be read back from the firmware due to a limitation of the communication protocol. There is no way to show the current setting.') }}'}"><i class="fas fa-info-circle"></i></a>
        </div>

        <!-- Flow rate -->
        <div id="control-jog-flowrate">
            <label>{{ _('Flow rate modifier:') }} <a class="text-info" href="javascript:void(0)" data-bind="popover: {placement: 'top', trigger: 'hover', title: '{{ _('Please note!') }}', content: '{{ _('The flow rate can only be set, it cannot be read back from the firmware due to a limitation of the communication protocol. There is no way to show the current setting.') }}'}"><i class="fas fa-info-circle"></i></a></label>
            <div class="input-append control-box">
                <input type="number" class="input-mini" min="1" step="1" data-bind="textInput: flowRate, event: { blur: resetFlowRateDisplay, focus: cancelFlowRateDisplayReset }, css: { pulsate_text_opacity: flowRateResetter() !== undefined }">
                <span class="add-on">%</span>
                <button class="btn" data-bind="enable: isOperational() && flowRate(), click: function() { $root.sendFlowRateCommand() }">Set</button>
            </div>
        </div>
    </div>
</div>
<!-- General control panel -->
<div id="control-jog-general" class="jog-panel" style="display: none;" data-bind="visible: loginState.hasPermissionKo(access.permissions.CONTROL)">
    <h1>{{ _('General') }}</h1>
    <div>
        <button class="btn btn-block control-box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendCustomCommand({type:'command',command:'M18'}) }">{{ _('Motors off') }}</button>
        <button class="btn btn-block control-box" data-bind="enable: isOperational(), click: function() { $root.sendCustomCommand({type:'command',command:'M106 S255'}) }">{{ _('Fan on') }}</button>
        <button class="btn btn-block control-box" data-bind="enable: isOperational(), click: function() { $root.sendCustomCommand({type:'command',command:'M106 S0'}) }">{{ _('Fan off') }}</button>
    </div>
</div>

<!-- Container for custom controls -->
<div id="control-jog-custom" style="clear: both; display: none;" data-bind="visible: loginState.hasPermissionKo(access.permissions.CONTROL), template: { name: $root.displayMode, foreach: controls }"></div>

<!-- Templates for custom controls -->
<script type="text/html" id="customControls_containerTemplate_nameless">
    <div class="custom_section">
        <!-- ko template: { name: 'customControls_containerTemplate', data: $data } --><!-- /ko -->
    </div>
</script>
<script type="text/html" id="customControls_containerTemplate_collapsable">
    <div class="custom_section">
        <h1 data-bind="toggleContent: { class: 'fa-caret-right fa-caret-down', parent: '.custom_section', container: '> div' }"><i class="fas" data-bind="css: {'fa-caret-down': !collapsed, 'fa-caret-right': collapsed}"></i> <span data-bind="text: name"></span></h1>
        <!-- ko template: { name: 'customControls_containerTemplate', data: $data } --><!-- /ko -->
    </div>
</script>
<script type="text/html" id="customControls_containerTemplate">
    <!-- ko if: layout == 'vertical' -->
    <div class="custom_section_vertical" data-bind="template: { name: $root.displayMode, foreach: children }, css: {hide: collapsed && name}"></div>
    <!-- /ko -->

    <!-- ko if: layout == 'horizontal' -->
    <div class="custom_section_horizontal" data-bind="template: { name: $root.displayMode, foreach: children }, css: {hide: collapsed && name}"></div>
    <!-- /ko -->

    <!-- ko if: layout == 'horizontal_grid' -->
    <div class="row-fluid custom_section_horizontal_grid" data-bind="css: {hide: collapsed && name}">
        <!-- ko foreach: children -->
        <div data-bind="template: { name: $root.displayMode }, css: $root.rowCss($data)"></div>
        <!-- /ko -->
    </div>
    <!-- /ko -->
</script>
<script type="text/html" id="customControls_controlTemplate">
    <form class="form-inline custom_control" onsubmit="return false;">
        <!-- ko template: { name: 'customControls_controlTemplate_input', data: $data, if: $data.hasOwnProperty('input') } --><!-- /ko -->
        <!-- ko template: { name: 'customControls_controlTemplate_command', data: $data, if: $data.hasOwnProperty('command') || $data.hasOwnProperty('commands') || $data.hasOwnProperty('script') || $data.hasOwnProperty('javascript') } --><!-- /ko -->
        <!-- ko template: { name: 'customControls_controlTemplate_output', data: $data, if: $data.hasOwnProperty('output') } --><!-- /ko -->
    </form>
</script>
<script type="text/html" id="customControls_controlTemplate_input">
    <!-- ko foreach: input -->
        <label style="cursor: default" data-bind="text: name"></label>
        <!-- ko if: slider -->
            <input type="number" style="width: 100px" data-bind="slider: {value: value, min: slider.min, max: slider.max, step: slider.step}">
        <!-- /ko -->
        <!-- ko ifnot: slider -->
            <input type="text" class="input-small" data-bind="attr: {placeholder: name}, value: value">
        <!-- /ko -->
    <!-- /ko -->
</script>
<script type="text/html" id="customControls_controlTemplate_output">
    <label style="cursor: default" data-bind="text: output"></label>
</script>
<script type="text/html" id="customControls_controlTemplate_command">
    <button class="btn" data-bind="text: name, css: additionalClasses, enable: $root.isCustomEnabled($data), click: function() { $root.clickCustom($data) }"></button>
</script>
<!-- End of templates for custom controls -->
